
<template lang="jade">

	div.return-bar
		i.iconfont(@click="back()") &#xe668;
		投资明细


	div.user-center.detail_top(v-infinite-scroll="down()" , infinite-scroll-disabled="busy", infinite-scroll-distance="10")
		div.searchinput.cbox.nopos
			div.clx.input1(style="padding:0rem")
				dl.nptype.cbox
					dd(v-bind:class="{ 'on': filter_status == '4'}",v-on:click="setFilterStatus('4', '回款中')") 回款中
					dd(v-bind:class="{ 'on': filter_status == '1'}",v-on:click="setFilterStatus('1', '未结清')") 未结清
					dd(v-bind:class="{ 'on': filter_status == '3'}",v-on:click="setFilterStatus('3', '投标中')") 投标中
					dd(v-bind:class="{ 'on': filter_status == '2'}",v-on:click="setFilterStatus('2', '已结清')") 已结清
			div(v-bind:class=" !showFilter ? 'clx filter_txt':'clx filter_txt on focus_on' ", ,v-on:click="showFilterFun()") 筛选
				i.iconfont.a_decent &#xe649;


		div.searchinput.cbox.nopos(v-show=" showFilter ", style="padding:0rem 0.2rem")
			flexbox.timedr
				flexbox-item 时间段：
				flexbox-item(v-bind:class="{ 'active': filter_duration == '4'}",v-on:click="setFilterDuration('4', '一周内')") 一周内
				flexbox-item(v-bind:class="{ 'active': filter_duration == '3'}",v-on:click="setFilterDuration('3', '一个月内')") 一个月内
				flexbox-item(v-bind:class="{ 'active': filter_duration == '2'}",v-on:click="setFilterDuration('2', '三个月内')") 三个月内
				flexbox-item(v-bind:class="{ 'active': filter_duration == '1'}",v-on:click="setFilterDuration('1', '一年内')") 一年内

		div.searchinput.cbox.nopos(v-show=" showFilter ")
			div.clx.input
				input(v-model="keywords", type="text",placeholder="输入项目名称或关健字")
				i.iconfont.zoom &#xe62b;
			div.clx
				button(@click="searchbyKW()") 搜索



 


		ul.order_filter_status(v-show="  filter_type=='3'  ")
			li.center
				div.input
					calendar(:value.sync="star_time", :weeks-list="weeksList")
				div.input
					calendar(:value.sync="end_time", :weeks-list="weeksList")
				button(@click="searchbyTime()") 确认


		

		div(v-show=" filter_status == '4' " )
			dl.invest_list(v-for="(index, item) in items")
				dd
					div.title 
						span.txt {{item.name}} 
						span.date 回款日期:{{item.recover_time}}
					ul.moneylist.triple.clearfix
						li
							strong 投资金额
							span.yellow {{item.account}}
						li
							strong 收益率
							span {{item.borrow_apr}}
						li
							strong 已还/期数
							span {{item.recover_period}}/{{item.borrow_period}}
						li
							strong 本期利息
							span {{item.interest}}
						li
							strong 本期本金
							span {{item.capital}}
						li
							strong 还款方式
							span {{item.borrow_style}}
						li
							//a.p_btn 查看
							a.p_btn.l5(href="http://www.uximoney.com/?user&q=api/borrow/downPdf&borrow_nid={{item.borrow_nid}}&uid={{item.uid}}") 下载查看


		div(v-show=" filter_status == '3' || filter_status == '2' || filter_status == '1' " )
			dl.invest_list(v-for="(index, item) in items")
				dd
					div.title 
						span.txt {{item.name}} 
						span.date 满标日期:{{item.reverify_time}}
					ul.moneylist.triple.clearfix
						li
							strong 投资金额
							span.yellow {{item.tender_account}}
						li
							strong 预期约定收益率
							span {{item.borrow_apr}}
						li
							strong 已还/期数
							span {{item.repay_period}}/{{item.borrow_period}}
						li
							strong 己收利息
							span {{item.recover_interest}}
						li
							strong 未收利息
							span {{item.unpaid_interest}}
						li
							strong 已收本金
							span {{item.recover_capital}}
						li
							strong 未收本金
							span {{item.unpaid_capital}}
						li
							strong 利息服务费
							span 0.00
						li
							//a.p_btn 查看
							a.p_btn.l5(href="http://www.uximoney.com/?user&q=api/borrow/downPdf&borrow_nid={{item.borrow_nid}}&uid={{item.uid}}") 下载查看



</template>



<script>
import '../../assets/sass/user/index.scss'
import {c_invest} from '../../config/api'
import {Calendar, Flexbox, FlexboxItem} from 'vux'



export default{
  	



	data(){
		return{
			busy: false,
			page: 1,
			items: [],
			keywords:'',
			filter_type:'',
			showFilter:false,
			filter_status:'4',
			filter_duration:'',
			filter_date:'',
			filter_status_txt:'投标状态',
			filter_duration_txt:'时间段',
			filter_date_txt:'日期',
			star_time:'TODAY',
			end_time:'TODAY',
			weeksList: ['日', '一', '二', '三', '四', '五', '六 ']
		}
	},
	components:{
		Calendar,
	    Flexbox,
	    FlexboxItem
	},
	methods: {


	    back(){
	      window.history.back();
	    },

	    showFilterFun(){
	    	this.showFilter = !this.showFilter;
	    },
	    setFilterStatus(key, txt){
	    	this.filter_status = key;
	    	this.page = 1;
	    	this.items = [];
	    	this.fetch(1);
	    	this.filter_type = this.filter_type+'1';
	    	this.filter_status_txt = txt;
	    },

	    setFilterDuration(key, txt){
	    	this.filter_duration = key;
	    	this.page = 1;
	    	this.items = [];
	    	this.fetch(1);
	    	this.filter_type = this.filter_type+'1';
	    	this.filter_duration_txt = txt
	    },

	    setFilter(key){
	    	this.filter_type = key;
	    },
		down: function() {
			if(this.busy == true || this.items == ''){
			return false;
			} 
			this.busy = true;
			this.fetch(++this.page)
		},

		searchbyKW(){
			if(this.keywords=='') return false;
			//this.filter_status ='';
			this.filter_status_txt ='投标状态';

			this.filter_duration = '';
			this.filter_duration_txt ='时间段';

			this.items = [];
			this.$http({url: c_invest+'&number=10&keywords='+this.keywords+'&type='+this.filter_status, method: 'GET'}).then(function (response) {
				this.items = response.data.data.list;
				this.busy = false;
			});
		},

		searchbyTime(){
			this.keywords = '';
			//this.filter_status_txt ='投标状态';
			this.filter_duration = '';
			this.filter_duration_txt ='时间段';
			this.items = [];
			this.$http({url: c_invest+'&number=10&star_time='+this.star_time+'&end_time='+this.end_time, method: 'GET'}).then(function (response) {
				this.items = response.data.data.list;
				this.busy = false;
			});
		},

	    down: function() {
	      if(this.busy == true || this.items == ''){
	        return false;
	      } 
	      this.busy = true;
	      this.fetch(++this.page);
	    },


		fetch: function (page) {
			this.keywords = '';
			//var data = {'page': page}
			this.$http({url: c_invest+'&number=10&type='+this.filter_status+'&time_status='+this.filter_duration+'&page='+this.page, method: 'GET'}).then(function (response) {

				var obj = response.data;
				if(!obj.status){
					//alert(obj.msg)
					if(obj.code == '10055'){
						sessionStorage.removeItem("login"); 
						this.$route.router.go('/login?from='+this.$route.path.substring(1))
					}
					return;
				}
		          
 

		        //this.items = response.data.data.list;
		        this.items = this.items.concat(response.data.data.list);
				this.busy = false;
			});
		}
	},
	route:{
		activate( transition ){
			this.fetch(1)
			transition.next();
		}
	}
}

</script>
